import React, { Component } from 'react'

import Detail from './Detail'

import { Link, Route } from 'react-router-dom'
export default class Message extends Component {
    
    state = {
        messageArr: [
            {id:'01',title:'消息1'},
            {id:'02',title:'消息2'},
            {id:'03',title:'消息3'},
        ]
    };

    handleClickPush = (id, title)=>{
        return ()=>{
            console.log(id,title);
            this.props.history.push(`/home/message/detail/${id}/${title}`)
        }
    }

    handleClickReplace = (id, title) => {
        return ()=>{
            this.props.history.replace(`/home/message/detail/${id}/${title}`)
        }
    }
    render() {
        const { messageArr } = this.state;
        return (
        <div>
            <ul>
            {
                messageArr.map(mapObj => {
                    return (
                        <li key = { mapObj.id }>
                        {/* 向路由组件传递params  参数*/}
                        <Link replace to={`/home/message/detail/${mapObj.id}/${mapObj.title}`}>{ mapObj.title }</Link>&nbsp;&nbsp;
                        <button onClick={this.handleClickPush(mapObj.id,mapObj.title)}>push查看</button>&nbsp;
                        <button onClick={this.handleClickReplace(mapObj.id,mapObj.title)}>replace查看</button>
                        
                        </li>
                    )
                })
            }
            </ul>
            <hr/>、
            {/* params方式 */}
            <Route path="/home/message/detail/:id/:title" component = {Detail}></Route>

            {/*  */}
       
        </div>
        )
    }
}
